<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <!-- 搜索 -->
      <el-input v-model="query.value" clearable placeholder="输入搜索内容" style="width: 200px;" class="filter-item" @keyup.enter.native="initMethod"/>
      <el-select v-model="query.type" clearable placeholder="类型" class="filter-item" style="width: 130px">
        <el-option v-for="item in queryTypeOptions" :key="item.key" :label="item.display_name" :value="item.key"/>
      </el-select>
      <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="initMethod">搜索</el-button>
      <!-- 新增 -->
      <div style="display: inline-block;margin: 0px 2px;">
        <el-button class="filter-item" size="mini" type="primary" icon="el-icon-plus" @click="add">新增</el-button>
      </div>
    </div>
    <!--表单组件-->
    <eForm ref="form" :is-add="isAdd"/>
    <!--表格渲染-->
    <el-row :gutter="15">
      <!--代理列表-->
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" style="margin-bottom: 10px">
        <el-card class="box-card" shadow="never">
          <div slot="header" class="clearfix">
            <span class="role-span">代理列表</span>
          </div>
          <el-table v-loading="loading" :data="tableData.content" :tree-props="{children: 'children', hasChildren: 'hasChildren'}" row-key="id" stripe border size="small" style="width: 100%;" @current-change="agentCurrentChange">
            <el-table-column prop="name" label="代理名称"/>
            <el-table-column prop="id" label="代理ID" width="70"/>
            <el-table-column prop="openid" label="openID" show-overflow-tooltip/>
            <el-table-column prop="level" label="级别" width="50px"/>
            <el-table-column prop="telphone" label="联系电话" width="110"/>
            <el-table-column prop="commission" label="提成" width="50px"/>
            <el-table-column label="操作" width="70px" align="center">
              <template v-if="scope.row.level > 1" slot-scope="scope">
                <el-button size="mini" type="primary" icon="el-icon-edit" @click="edit(scope.row)"/>
              </template>
            </el-table-column>
          </el-table>
          <!--分页组件-->
          <div class="block">
            <el-pagination
              :current-page="query.page"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="query.size"
              :total="tableData.totalElements"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange">
            </el-pagination>
          </div>
        </el-card>
      </el-col>
      <!--代理详情-->
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" style="margin-bottom: 10px">
        <el-card class="box-card" shadow="never">
          <div slot="header" class="clearfix">
            <span class="role-span">代理账户</span>
          </div>
          <el-form inline class="demo-table-expand">
            <el-form-item label="代理名称:">
              <span>{{ agent.name }}</span>
            </el-form-item>
            <el-form-item label="账户余额:">
              <span>{{ agent.balance }}</span>
            </el-form-item>
            <el-form-item label="累计金额:">
              <span>{{ agent.cumulative }}</span>
            </el-form-item>
            <el-form-item label="赠送金额:">
              <span>{{ agent.bonus }}</span>
            </el-form-item>
            <el-form-item label="积分:">
              <span>{{ agent.integral }}</span>
            </el-form-item>
          </el-form>
          <el-button size="mini" type="primary" @click="deviceDetail(agent.id)">查看设备</el-button>
          <el-button size="mini" type="primary" @click="orderDetail(agent.id)">查看订单</el-button>

        </el-card>
        <el-card class="box-card" shadow="never" style="margin-top: 10px;">
          <div slot="header" class="clearfix">
            <span class="role-span">工作人员列表</span>
          </div>
          <el-table v-loading="loading" :data="employee" stripe border size="small" style="width: 100%;">
            <el-table-column prop="id" label="工作ID"/>
            <el-table-column prop="name" label="姓名"/>
            <el-table-column prop="telphone" label="联系电话"/>
            <el-table-column prop="shop" label="管理店铺数量"/>
            <el-table-column prop="recordCount" label="待处理维修"/>
          </el-table>
        </el-card>
        <el-card class="box-card" shadow="never" style="margin-top: 10px;">
          <div slot="header" class="clearfix">
            <span class="role-span">店铺列表</span>
          </div>
          <el-table v-loading="loading" :data="shop.content" stripe border size="small" style="width: 100%;">
            <el-table-column prop="shopName" label="商户名称" show-overflow-tooltip/>
            <el-table-column prop="id" label="商户ID"/>
            <el-table-column prop="amount" label="订单金额"/>
            <el-table-column prop="telphone" label="联系电话"/>
            <el-table-column prop="rate" label="提成" width="80px"/>
            <el-table-column prop="count" label="设备" width="80px"/>
            <el-table-column label="操作" width="100px" align="center">
              <template slot-scope="scope">
                <el-tooltip slot="reference" content="商铺详情" placement="top" >
                  <el-button type="warning" size="mini" icon="el-icon-office-building" @click="shopDetail(scope.row.id)"/>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
          <!--分页组件-->
          <div class="block">
            <el-pagination
              :current-page="shopquery.page"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="shopquery.size"
              :total="shop.totalElements"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="shopSizeChange"
              @current-change="shopCurrentChange">
            </el-pagination>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import checkPermission from '@/utils/permission'
import eForm from './form'
import { postRequest } from '@/api/identity'
export default {
  // name: 'Agent',
  components: { eForm },
  data() {
    return {
      loading: false,
      delLoading: false,
      isAdd: false,
      query: {
        value: '',
        type: '',
        page: 1,
        size: 10
      },
      shopquery: {
        value: '',
        type: '',
        page: 1,
        size: 10
      },
      tableData: {
        totalElements: 0,
        data: []
      },
      agent: {},
      employee: [],
      shop: {
        totalElements: 0,
        content: []
      },
      queryTypeOptions: [
        { key: 'id', display_name: '代理ID' },
        { key: 'name', display_name: '一级代理' },
        { key: 'name2', display_name: '二级代理' }
      ]
    }
  },
  created() {
    this.$nextTick(() => {
      this.initMethod()
    })
  },
  methods: {
    checkPermission,
    initMethod() {
      postRequest('/pc/agent', this.query).then(resp => {
        console.log(resp)
        this.tableData = resp.entity
      })
    },
    handleSizeChange(val) {
      this.query.size = val
      this.initMethod()
    },
    handleCurrentChange(val) {
      this.query.page = val
      this.initMethod()
    },
    agentCurrentChange(val) {
      if (val) {
        this.agent = val.account
        this.agent.id = val.id
        this.agent.name = val.name
        this.shopquery.value = val.openid
        this.shoplist()
      }
    },
    shoplist() {
      postRequest('/pc/agentShop', this.shopquery).then(resp => {
        console.log(resp)
        this.shop = resp.data.shop
        this.employee = resp.data.employee
      })
    },
    shopSizeChange(val) {
      this.shopquery.size = val
      this.shoplist()
    },
    shopCurrentChange(val) {
      this.shopquery.page = val
      this.shoplist()
    },
    add() {
      this.isAdd = true
      this.$refs.form.dialog = true
      this.$refs.form.initMethods()
    },
    edit(val) {
      console.log(val)
      this.isAdd = false
      const _this = this.$refs.form
      _this.form = val
      _this.level = val.level
      _this.dialog = true
      _this.initMethods()
    },
    deviceDetail(id) {
      this.$router.push({ path: 'device', query: { value: id, type: 'agentId' }})
    },
    orderDetail(id) {
      this.$router.push({ path: 'order', query: { value: id, type: 'agentId' }})
    },
    shopDetail(shopId) {
      this.$router.push({ path: 'shop', query: { value: shopId, type: 'shopId' }})
    }
  }
}
</script>

<style scoped>
  .el-form-item{
    margin-bottom: 0;
  }
</style>
